<template>
  <div>
    <h3>示例一</h3>
    <van-cell-group>
      <van-field :value="value1" readonly label="车牌号" @click="show = true" />
    </van-cell-group>
    <vnp-keyboard v-model="value1" :show.sync="show"></vnp-keyboard>

    <h3>示例二</h3>
    <div class="demo-two-box">
      <vnp-input v-model="value2"></vnp-input>
    </div>
  </div>
</template>

<script>
import Keyboard from '@/components/vant-number-plate/vnp-keyboard';
import VnpInput from '@/components/vant-number-plate/vnp-input';

export default {
  name: 'App',
  components: {
    'vnp-keyboard': Keyboard,
    'vnp-input': VnpInput
  },
  data() {
    return {
      show: false,
      value1: '',
      value2: '川A'
    }
  }
}
</script>

<style lang="less" scoped>
  .demo-two-box {
    padding: 0 30px;
  }
  h3 {
    padding: 0 30px;
  }
</style>
